<template>
  <split splitHeight="calc(100vh-5px)" leftWidth="240" style="margin-top: 4px; overflow: hidden">
    <template #paneL>
      <DepartTree @select="onTreeSelect" />
    </template>
    <template #paneR>
      <div class="jeecg-basic-table jeecg-basic-table-form-container" style="border-bottom:1px #E5E7E8 solid; padding:0;">
        <!--自定义查询区域-->
        <a-form @keyup.enter.native="searchQuery" style="width: 100%">
          <a-row :gutter="8" type="flex">
            <a-col flex="140px">
              <a-form-item label="状态" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                <JDictSelectTag v-model:value="queryParam.status" placeholder="" dictCode="user_status" />
              </a-form-item>
            </a-col>
            <a-col flex="200px">
              <a-form-item label="账号" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
                <a-input placeholder="" v-model:value="queryParam.username"></a-input>
              </a-form-item>
            </a-col>
            <a-col flex="150px">
              <a-form-item label="姓名" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
                <a-input placeholder="" v-model:value="queryParam.realname"></a-input>
              </a-form-item>
            </a-col>
            <a-col flex="200px">
              <a-form-item label="手机号码" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
                <a-input placeholder="" v-model:value="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>
            <a-col flex="auto" style="float:right; width:150px;">
            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
              <a-button type="default" @click="searchReset" preIcon="ant-design:reload-outlined" style="margin-left: 8px">重置</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!--引用表格 :rowSelection="rowSelection"-->
      <BasicTable  @register="registerTable" :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName" >
        <!--插槽:table标题-->
        <template #tableTitle>
          <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增 </a-button>
          <a-button type="primary" preIcon="ant-design:edit-outlined" @click="handleEdit"> 编辑 </a-button>
          <span class="pl-5px"></span>
          <a-button type="primary" preIcon="ant-design:clear-outlined" @click="handleDelete"> 删除 </a-button>
          <a-popconfirm title="重置密码" placement="bottom" @confirm="handleResetPassword">
            <template #icon><question-circle-outlined style="color: red" /></template>
            <a-button type="primary" preIcon="ant-design:lock"> 密码 </a-button>
          </a-popconfirm>
          <span class="pl-5px"></span>
          <a-popconfirm title="启用用户" placement="bottom" @confirm="unlockObj" >
            <template #icon><question-circle-outlined style="color: green" /></template>
            <a-button type="primary" preIcon="ant-design:check-outlined"> 启用 </a-button>
          </a-popconfirm>
          <a-popconfirm title="禁用用户" placement="bottom" @confirm="lockObj" >
            <template #icon><question-circle-outlined style="color: red" /></template>
            <a-button type="primary" preIcon="ant-design:close-outlined"> 禁用 </a-button>
          </a-popconfirm>
          <!--a-button type="primary" preIcon="ant-design:close-circle-twotone" @click="handleCreate"> 微信 </a-button-->
        </template>
      </BasicTable>
    </template>
  </split>

  <div>
    <!--用户抽屉-->
    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
    <!--修改密码-->
    <PasswordModal @register="registerPasswordModal" @success="reload" />
    <!--用户代理-->
    <UserAgentModal @register="registerAgentModal" @success="reload" />
    <!--回收站-->
    <UserRecycleBinModal @register="registerModal" @success="reload" />
  </div>
</template>

<script lang="ts" setup name="system-user">
//ts语法
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { ref, toRaw, computed, unref, reactive, provide } from "vue";
import { BasicTable } from "/@/components/Table";
import { useDrawer } from "/@/components/Drawer";
import { useListPage } from "/@/hooks/system/useListPage";
import { useModal } from "/@/components/Modal";
import { useMessage } from "/@/hooks/web/useMessage";
import { columns, searchFormSchema } from "./user.data";
import { list, deleteUser, frozenBatch, syncUser, resetPassword } from "./user.api";
import { useDesign } from "/@/hooks/web/useDesign";
import { filterObj } from "/@/utils/common/compUtils";
import { isString } from "/@/utils/is";
// import { usePermission } from '/@/hooks/web/usePermission'
// const { hasPermission } = usePermission();
import UserDrawer from "./UserDrawer.vue";
import UserRecycleBinModal from "./UserRecycleBinModal.vue";
import PasswordModal from "./PasswordModal.vue";
import UserAgentModal from "./UserAgentModal.vue";
import JDictSelectTag from "/@/components/Form/src/jeecg/components/JDictSelectTag.vue";
import Split from '/@/components/pt/split/Index.vue'
import DepartTree from './DepartTree.vue';

const { createMessage, createConfirm } = useMessage();
//注册drawer
const [registerDrawer, { openDrawer }] = useDrawer();
//回收站model
const [registerModal, { openModal }] = useModal();
//密码model
const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();
//代理人model
const [registerAgentModal, { openModal: openAgentModal }] = useModal();

//-----------------
//-----自定义查询----begin--------
const queryParam = reactive<any>({
  departId: ''
});

function searchQuery() {
  setProps({searchInfo:toRaw(filterObj(queryParam))});
  reload();
}

function searchReset() {
  Object.assign(queryParam, {});
  reload();
}

/**
 * 左则部门树
 * 1、初始进入列表时，默认无选择
 * 2、选中某部门，带入参数自动查询
 * 3、可取消选择
 * @param key
 */
function onTreeSelect(key) {
  //console.info("onTreeSelect@@", key, typeof key === 'undefined')
  if (typeof key === 'undefined') {
    return false;
  }
  queryParam.departId = isString(key) ? key : '';
  searchQuery();
}

// 列表页面公共参数、方法
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  designScope: "user-list",
  tableProps: {
    api: list,
    columns: columns,
    size: "small",
    showIndexColumn: true,
    useSearchForm: false,
    showActionColumn: false,
    beforeFetch: (params) => Object.assign(params, unref(queryParam)), //oosfile\index.vue
  },
});

//注册table数据
const [registerTable, { reload, setProps, updateTableDataRecord }] = tableContext;

provide('prefixCls', prefixCls);
/**
 * 新增事件
 */
function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
    showFooter: true
  });
}

/**
 * 编辑事件
 */
async function handleEdit(record: Recordable) {
  Object.assign(record, selectRows)
  openDrawer(true, {
    record,
    isUpdate: true,
    showFooter: true
  });
}

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

//双击行
function handleDblclick(record) {
  handleEdit(record);
}

function rowClassName(record) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  if ("admin" == record.username) {
    createMessage.warning("管理员账号不允许此操作！");
    return;
  }
  if (!selectRows.id) {
    createMessage.warning("请先选择！");
    return;
  }
  await deleteUser({ id: selectRows.id }, reload);
}

/**
 * 成功回调
 */
function handleSuccess({ isUpdate, values }) {
  if (isUpdate) {
    updateTableDataRecord(values.id, values);
  }
  reload();
}

/**
 * 打开修改密码弹窗
 */
function handleChangePassword() {
  if (!selectRows.id) {
    createMessage.warning("请先选择！");
    return;
  }
  openPasswordModal(true, { selectRows });
}

/**
 * 重置密码
 */
async function handleResetPassword() {
  if ("admin" == selectRows.username) {
    createMessage.warning("管理员账号不允许此操作！");
    return;
  }

  if (!selectRows.id) {
    createMessage.warning("请先选择！");
    return;
  }

  await resetPassword({ id: selectRows.id }).then((res) => {
    if (res.success) {
      createMessage.success(res.message, 2);
    } else {
      createMessage.error(res.message,3);
    }
  }).finally(() => {
    //reload()
  });
}

//禁用
function lockObj() {
  if (!selectRows.id) {
    createMessage.warning("请先选择！");
    return;
  }
  handleFrozen({ id: selectRows.id, username: selectRows.username }, 2);
}

//启用
function unlockObj() {
  if (!selectRows.id) {
    createMessage.warning("请先选择！");
    return;
  }
  handleFrozen({ id: selectRows.id, username: selectRows.username }, 1);
}

/**
 * 冻结解冻
 */
async function handleFrozen(record, status) {
  if (record && "admin" == record.username) {
    createMessage.warning("管理员账号不允许此操作！");
    return;
  }
  await frozenBatch({ ids: record.id, status: status }, reload);
}


</script>

<style lang="less" scoped>
.ant-row1 > div:not(.gutter-row):nth-child(2n + 1) {
  background: rgba(0, 146, 255, .75);
}

.ant-row1 > div:not(.gutter-row) {
  padding: 16px 0;
  background: #0092ff;
}

.ant-col1 {
  position: relative;
  max-width: 100%;
  min-height: 1px;
}
</style>
